#banner-container {
	width: 100%;
	height: 230px;
	background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
	padding-top: 10px;
}

#banner-swiper {
	width: 90%;
	height: 200px;
	margin: 0 auto;
	border-radius: 10px;
	margin-top: -175px;
}

.banner-slide {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-size: 100% 100%;
}

.swiper-pagination-bullet {
    width: 0.8rem;
    height: 0.8rem;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #FF6666;
}

.nav-container {
	width: 90%;
	margin: 0 auto;
	padding: 30px 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.nav-item-l {
	width: 60%;
	height: 120px;
	border-radius: 10px;
	margin-bottom: 15px;
	.item-title {
		width: 45%; 
		font-size: 2.2rem; 
		font-weight: bold;
		color: #ffffff;
		display: flex; 
		align-items: center; 
		justify-content: center;
	}
	.item-img {
		// width: 100px; 
		height: 100%; 
		// background-size: auto 100%; 
		// background-position-x: center;  
		// border-radius: 50%;
		img {
			height: 100%;
		}
	}
	.nav-item-l-panel {
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
}

.nav-item-s {
	width: 38%;
	height: 120px;
	border-radius: 10px;
	font-size: 2.2rem; 
	font-weight: bold; 
	color: #ffffff;
	display: flex; 
	align-items: center; 
	justify-content: center;
}

